<template>
  <div class="app-container">
    <h1>
      二维码生成
    </h1>
    <div v-loading="dataLoading">
      <el-col :span="20" :offset="6" style="margin-top: 3%">
        <el-form label-width="100px" size="mini"
                 style="text-align: center">
          <el-form-item label="桌号范围">
            <el-col :span="4">
              <el-input v-model="locationIdRange[0]" type="number" min="1"></el-input>
            </el-col>
            <el-col :span="2">至</el-col>
            <el-col :span="4">
              <el-input v-model="locationIdRange[1]" type="number" min="1"></el-input>
            </el-col>
            <el-button style="margin-left: -40%" type="primary" @click="generatorQr">生成</el-button>
            <el-button style="margin-left: 10px" type="warning" @click="qrcode=[]">清除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <div v-if="qrcode.length!==0" style="text-align: center">
        <ul class="icon-list">
          <li v-for="(k,v) in qrcode">
            <img style="width: 100%;height: 100%"
                 :src="k" alt="">
            {{ v+parseInt(locationIdRange[0])}}号桌
          </li>
        </ul>
        <el-button style="margin-top: 20px" type="primary" @click="downloadImg" size="mini">下载</el-button>
      </div>
    </div>
  </div>

</template>

<script>
  import request from "@/utils/request";
  import JSZip from 'jszip'
  import fileSaver from 'file-saver'
  import QRCode from 'qrcode'

  export default {
    name: "index",
    data() {
      return {
        dataLoading: false,
        locationIdRange: [],
        qrcode: []
      }
    },
    methods: {
      generatorQr() {

        if (!this.locationIdRange[0] || !this.locationIdRange[1]) {
          this.$message({
            type: 'warning',
            center: true,
            message: '尚未输入完整！',
            duration: 1500
          });
          return
        }
        if (parseInt(this.locationIdRange[0]) <= 0 || parseInt(this.locationIdRange[1]) <= 0) {
          this.$message({
            type: 'warning',
            center: true,
            message: '桌号格式不正确！',
            duration: 1500
          });
          return;
        }
        if (parseInt(this.locationIdRange[0]) > parseInt(this.locationIdRange[1])) {
          this.$message({
            type: 'warning',
            center: true,
            message: '桌号区间范围不正确！',
            duration: 1500
          });
        } else {
          this.dataLoading = true
          request({
            url: '/wx/ticket',
            method: 'POST',
            data: {
              shopId: this.$store.state.user.shop.id,
              locationIdRange: this.locationIdRange
            }
          }).then(v => {
            this.qrcode = []
            this.$message({
              type: 'success',
              center: true,
              message: `生成成功，共${v.data.length}个！`,
              duration: 1500
            });
            v.data.forEach((v, index) => {
              QRCode.toDataURL(v, {type: 'image/png', height: 331, width: 331}).then(s => {
                this.qrcode.push(s)
              })
            })
          }).finally(() => {
            this.dataLoading = false
          })
        }
      },

      dataURLtoFile(dataurl, filename) {
        let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], '', {
          type: mime
        });
      },
      async downloadImg() {
        this.dataLoading = true
        let zip = new JSZip();
        this.qrcode.forEach((v, index) => {
          zip.file(`${index + parseInt(this.locationIdRange[0])}号桌二维码.png`, this.dataURLtoFile(v));
        })
        zip.generateAsync({type: 'blob'})
          .then(function (content) {
            fileSaver.saveAs(content, '餐桌二维码.zip');
          });
        this.dataLoading = false
      }
    }
  }
</script>

<style scoped>
  .icon-list {
    overflow: hidden;
    list-style: none;
    padding: 0 !important;
    border: 1px solid #eaeefb;
    border-radius: 4px;
    text-align: center;
  }

  .icon-list li {
    display: inline-block !important;
    width: 150px !important;
    height: 150px !important;
  }
</style>
